
const { ccclass, property } = cc._decorator;

/**动画状态 */
enum AnimState {
    /**动画未开始 */
    None,
    /**播放动画 */
    Play,
    /**等待动画 */
    Wait,
    /**播放完成 */
    Finish,
}

@ccclass
export default class PopupGuardStory extends cc.Component {

    @property(cc.Node)
    private story: cc.Node = null;
    protected start(): void {
        this.init();
    }

    public init() {
        this.scrollOff();
        this.initItems();
    }


    //#region 剧情项动画
    private m_items: cc.Node[] = [];

    private posY: number = 0;
    index = 0;

    /**播放下一帧动画时间 */
    aniTime = 0;

    aniState = AnimState.None;
    update(dt: number) {
        if (this.aniState === AnimState.Wait) {
            this.aniTime += dt;
            if (this.aniTime >= 0.8) {
                this.aniTime = 0;
                this.upAnim();
            }
        }

    }
    onClicked() {
        if (this.aniState === AnimState.Wait) {
            this.upAnim();
        }
    }



    initItems() {
        this.m_items = [];
        for (let i = 0; i < this.story.children.length; i++) {
            this.story.children[i].active = false;
            this.m_items.push(this.story.children[i]);
        }
        this.playAnimEnter()
    }
    protected finishCallback: Function;
    public playAnimEnter(callback?: Function) {
        this.aniTime = 0;
        this.aniState = AnimState.Play;
        const index = this.index;
        const item = this.m_items[index];
        if (index < this.m_items.length - 1) {
            const item1 = this.m_items[index + 1];
            this.posY += item1.height + item.height / 2;
            this.posY = -item1.y + item1.height / 2 - 55 * (index + 1);
        }

        this.animEnter(item, index % 2 === 0, callback);
    }
    public animEnter(node: cc.Node, isLeft: boolean, callback?: Function) {
        // node.opacity = 0;
        node.active = true;
        node.scale = 0.8;
        let leftNum = 0;
        let rightNum = 0;
        if (isLeft) {
            node.x = 760;
            leftNum = -8;
            rightNum = 4;

        } else {
            node.x = -760;
            leftNum = 8;
            rightNum = -4;
        }
        cc.tween(node)
            .to(5 / 30, { // 1~5帧（4帧时间）
                position: cc.v3(leftNum, node.y),  // 左移8像素
                scale: 1                 // 恢复原始尺寸
            }, { easing: 'quadIn' })
            .to(4 / 30, { // 5~9帧
                position: cc.v3(rightNum, node.y)   // 右移4像素
            })
            .to(3 / 30, { // 9~11帧
                position: cc.v3(0, node.y)    // 回到中心
            })
            // .delay(GFunc.frameTime(20))               // 停留15帧
            .call(() => {
                this.aniState = AnimState.Wait;
                // this.upAnim();
                this.finishCallback = callback;
                if (this.finishCallback) {
                    this.finishCallback();
                }
            })
            .start();

    }
    private upAnim() {
        this.aniState = AnimState.Play;
        this.index += 1;
        if (this.index >= this.m_items.length) return;
        let t = cc.tween;
        if (this.index < this.m_items.length - 1) {
            t(this.story)
                .parallel(
                    t()
                        .delay(4 / 30)
                        .call(() => {
                            this.playAnimEnter();

                        })
                    ,
                    t()
                        .to(6 / 30, { // 1~5帧（4帧时间）
                            position: cc.v3(0, this.posY)
                        })
                )
                .start();
        } else {
            this.playAnimEnter(() => {
                this.playTipLabel();
            });
        }
    }
    playTipLabel() {
        this.scrollOn();

    }

    @property({ type: cc.Node, tooltip: "滚动视图" })
    scrollView: cc.Node = null;

    scrollOff() {
        this.scrollView.removeComponent(cc.ScrollView);
    }
    scrollOn() {
        const view = this.scrollView.addComponent(cc.ScrollView);
        //设置content
        view.content = this.story;
        //设置滚动方向
        view.vertical = true;
        view.horizontal = false;
        view.inertia = true;
        view.brake = 0.75;
        view.elastic = true;
        view.bounceDuration = 0.23;
    }

    //#endregion
}
